
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="付款单编号" prop="ownerName">
        <el-input
          v-model="queryParams.payOrderNo"
          placeholder="请输入付款单编号"
          clearable
          size="small"
        />
      </el-form-item>
        <el-form-item label="业主姓名" prop="ownerName">
          <el-input
            v-model="queryParams.ownerName"
            placeholder="请输入业主姓名"
            clearable
            size="small"
          />
      </el-form-item>
        <br>
      <el-form-item label="付款状态" prop="houseType">
        <el-select v-model="queryParams.payState" placeholder="请选择" clearable size="small">
          <el-option label="请选择" value="" />
          <el-option label="未付款" value="1" />
          <el-option label="已付款" value="2" />
          <el-option label="已终止" value="3" />
          <el-option label="已冻结" value="4" />
        </el-select>
      </el-form-item>

      <el-form-item label="账单类型" prop="houseType">
        <el-select v-model="queryParams.billType" placeholder="请选择" clearable size="small">
          <el-option label="请选择" value="" />
          <el-option label="收房货变更" value="1" />
          <el-option label="退租变更" value="2" />
          <el-option label="普通账单" value="3" />
          <el-option label="续约结算" value="4" />
        </el-select>
      </el-form-item>
        <el-form-item label="收房合同编号">
          <el-input
            v-model="queryParams.sfContractNo"
            placeholder="请输入收房合同编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <br>

      <el-form-item label="付款日期" prop="conInfoTime" label-width="30">
        <el-date-picker clearable size="small"
                        v-model="queryParams.startDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择合同录入时间，">
        </el-date-picker>
        至
        <el-date-picker clearable size="small"
                        v-model="queryParams.endDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择合同录入时间，">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery" >搜索</el-button>

        <el-button type="primary" icon="el-icon-refresh" plain>重置</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="收房付款单" name="1">
        <el-table v-loading="loading" :data="contractList">
          <el-table-column label="收房合同号" align="center" prop="sfContractNo" />
          <el-table-column label="房产信息" align="center" prop="houseName" />
          <el-table-column label="业主姓名" align="center" prop="ownerName" >
           <!-- <template slot-scope="scope">
              <span v-for=" s in paystasus1" v-if="scope.row.applyState==s.id">{{s.name}}</span>
            </template>-->
          </el-table-column>
          <el-table-column label="支付金额" align="center" prop="paymentAmount" width="180">
        <!--    <template slot-scope="scope">
              {{scope.row.loanAmount}}元
            </template>-->
          </el-table-column>
          <el-table-column label="账期" align="center" prop="payNumber" width="180">
           <template slot-scope="scope">
              第{{scope.row.payNumber}}期
            </template>
          </el-table-column>

          <el-table-column label="付款状态" align="center" prop="payState" width="180">
            <template slot-scope="scope">
              <span v-for=" s in paystasus" v-if="scope.row.payState==s.id">{{s.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="账单类型" align="center" prop="billType" width="180">
            <template slot-scope="scope">
              <span v-for=" s in paystasus1" v-if="scope.row.payState==s.id">{{s.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="应付日期" align="center" prop="payableDate" >
           <!-- <template slot-scope="scope">
              <span v-for=" s in paystasus" v-if="scope.row.applyState==s.id">{{s.name}}</span>
            </template>-->
          </el-table-column>
          <el-table-column label="付款日期" align="center" prop="paidTime" />
          <el-table-column label="支付方式" align="center" prop="payMethod" >
            <template slot-scope="scope">
              <span v-for=" s in paystasus3" v-if="scope.row.payMethod==s.id">{{s.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.payMethod==null" @click="getSxzf1(scope.row.sfContractNo,scope.row.payNumber,scope.row.paymentAmount)" type="text" size="small">支付</el-button>
              <span v-if="scope.row.payMethod!=null">------</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="2" >
        <el-table v-loading="loading" :data="contractList">
          <el-table-column label="收房合同号" align="center" prop="sfContractNo" />
          <el-table-column label="房产信息" align="center" prop="houseName" />
          <el-table-column label="业主姓名" align="center" prop="ownerName" >
            <!-- <template slot-scope="scope">
               <span v-for=" s in paystasus1" v-if="scope.row.applyState==s.id">{{s.name}}</span>
             </template>-->
          </el-table-column>
          <el-table-column label="支付金额" align="center" prop="paymentAmount" width="180">
            <!--    <template slot-scope="scope">
                  {{scope.row.loanAmount}}元
                </template>-->
          </el-table-column>
          <el-table-column label="账期" align="center" prop="payNumber" width="180">
            <template slot-scope="scope">
              第{{scope.row.payNumber}}期
            </template>
          </el-table-column>

          <el-table-column label="款项" align="center" prop="itemType" width="180">
            <template slot-scope="scope">
              <span v-for=" s in paystasus2" v-if="scope.row.itemType==s.id">{{s.name}}</span>
            </template>
          </el-table-column>

          <el-table-column label="付款状态" align="center" prop="payState" width="180">
            <template slot-scope="scope">
              <span v-for=" s in paystasus" v-if="scope.row.payState==s.id">{{s.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="账单类型" align="center" prop="billType" width="180">
            <template slot-scope="scope">
              <span v-for=" s in paystasus1" v-if="scope.row.payState==s.id">{{s.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="应付日期" align="center" prop="payableDate" >
            <!-- <template slot-scope="scope">
               <span v-for=" s in paystasus" v-if="scope.row.applyState==s.id">{{s.name}}</span>
             </template>-->
          </el-table-column>
          <el-table-column label="付款日期" align="center" prop="paidTime" />
          <el-table-column label="支付方式" align="center" prop="payMethod" >
            <template slot-scope="scope">
              <span v-for=" s in paystasus3" v-if="scope.row.payMethod==s.id">{{s.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.payMethod==null" @click="getSxzf1(scope.row.sfContractNo,scope.row.payNumber,scope.row.paymentAmount)" type="text" size="small">支付</el-button>
              <span v-if="scope.row.payMethod!=null">------</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="3">
        <el-table v-loading="loading" :data="contractList">
          <el-table-column label="收房合同号" align="center" prop="sfContractNo" />
          <el-table-column label="房产信息" align="center" prop="houseName" />
          <el-table-column label="业主姓名" align="center" prop="ownerName" >
            <!-- <template slot-scope="scope">
               <span v-for=" s in paystasus1" v-if="scope.row.applyState==s.id">{{s.name}}</span>
             </template>-->
          </el-table-column>
          <el-table-column label="支付金额" align="center" prop="paymentAmount" width="180">
            <!--    <template slot-scope="scope">
                  {{scope.row.loanAmount}}元
                </template>-->
          </el-table-column>
          <el-table-column label="账期" align="center" prop="payNumber" width="180">
            <template slot-scope="scope">
              第{{scope.row.payNumber}}期
            </template>
          </el-table-column>

          <el-table-column label="付款状态" align="center" prop="payState" width="180">
            <template slot-scope="scope">
              <span v-for=" s in paystasus" v-if="scope.row.payState==s.id">{{s.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="账单类型" align="center" prop="billType" width="180">
            <template slot-scope="scope">
              <span v-for=" s in paystasus1" v-if="scope.row.payState==s.id">{{s.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="应付日期" align="center" prop="payableDate" >
            <!-- <template slot-scope="scope">
               <span v-for=" s in paystasus" v-if="scope.row.applyState==s.id">{{s.name}}</span>
             </template>-->
          </el-table-column>
          <el-table-column label="付款日期" align="center" prop="paidTime" />
          <el-table-column label="支付方式" align="center" prop="payMethod" >
            <template slot-scope="scope">
              <span v-for=" s in paystasus3" v-if="scope.row.payMethod==s.id">{{s.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.payMethod==null" @click="getSxzf1(scope.row.sfContractNo,scope.row.payNumber,scope.row.paymentAmount)" type="text" size="small">支付</el-button>
              <span v-if="scope.row.payMethod!=null">------</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {getFkjhcxlistSet,getaliapySet} from "@/api/caiwu/caiwujs";

  export default {
    name: "list",
    data() {
      return {
        // 遮罩层
        loading: true,
        activeName:"1",

        // 总条数
        total: 0,
        // 显示搜索条件
        showSearch: true,

        paystasus:[
          {id:2,name:"已付款"},{id:1,name:"未付款"},{id:3,name:"已终止"},{id:4,name:"已冻结"}
        ],
        paystasus1:[
          {id:1,name:"收房货变更"},{id:2,name:"退租变更"},{id:3,name:"普通账单"},{id:4,name:"续约结算"}
        ],
      paystasus2:[
        {id:1,name:"水费"},{id:2,name:"电费"},{id:3,name:"煤/燃气费"},{id:4,name:"维修费"},
        {id:5,name:"保险费"},{id:6,name:"护理费"},{id:7,name:"公交费"},{id:12,name:"电器费"}
        ,{id:8,name:"解约费"},{id:9,name:"续约费"},{id:10,name:"押金"},{id:11,name:"交通费"}
      ],
        paystasus3:[
          {id:1,name:"微信"},{id:2,name:"支付宝"},{id:3,name:"其他"}
        ],
        contractList:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          payOrderNo:null,
          ownerName:null,
          payState:null,
          billType:null,
          sfContractNo:null,
          startDate:null,
          endDate:null,
          itemflag:1,
        }
      }
    },

    methods: {
      /** 查询【请填写功能名称】列表 */
      getList() {
        this.loading = true;
        getFkjhcxlistSet(this.queryParams).then(response => {
          this.contractList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      handleClick(tab, event) {
        this.queryParams.itemflag = tab.name;
        this.getList();
      },
      getSxzf: function () {
        window.location.href = 'http://localhost:4001/aliapy?id='+1;
      },
      getSxzf1(htid,zq,je){
        window.location.href = 'http://localhost:4001/aliapy?htid='+htid+"&zq="+zq+"&je="+je;
      }
    }
    ,
    mounted() {
      this.getList();
    }
  }
</script>

<style scoped>

</style>
